<template>
  <div class="container-pt">
    <van-nav-bar left-arrow  @click-left="$router.back()" fixed title="列表"/>
    <van-tabs v-model="active" animated swipeable @click="clickTab()">
      <van-tab v-for="(item) in list" :key="item.id" >
        <template #title><van-icon :name="item.icon"  /> {{ item.catename }} </template>
       </van-tab>
    </van-tabs>
       <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
      <article-list ref="article"  v-for="(item,index) in listContent" :key="index" :item="item" />
    </van-list>
  </div>
</template>

<script>
// import {getNewList} from '../api/index'
import articleList from '@/components/article-list.vue'
import {getList} from '../api/list'
export default {
  components: { articleList },
  data() {
    return {
      active:0,
      list:[],
       loading: false,
        finished: false,
        total: 0,
        page:1,
        limit:10,
        cateid:8,
        listContent:[]
    };
  },
  async created(){

    
      await this.$store.dispatch('indexList/getBannerList')
      const res = this.$store.state.indexList.indexAll
      // console.log(res);
      this.list = res.allCate
      // console.log(this.list);

  //判断高亮
      // console.log(this.$route.query.index);
      this.active = +this.$route.query.index || 0
      this.cateid = this.list[this.active].id
      // console.log(this.cateid);
      // this.getList()

},
  methods:{
    //进入页面拿到数据
  // async  getList(){
  //       const res = await getList({page:this.page,limit:this.limit,cateid:this.cateid})
  //       // console.log(res);
  //       this.total = res.data.list.totalPages
  //       this.listContent = res.data.list.data
  //   },
    clickTab(){
      this.page = 1
      this.cateid = this.list[this.active].id
      this.listContent = []
      this.onLoad()
    },
    async onLoad() {
    // this.getList()
      // 异步更新数据
        const res = await getList({page:this.page,limit:this.limit,cateid:this.cateid})
        // console.log(res);
        // this.total = res.data.list.totalPages
        this.total = res.data.list.totalPages
        // this.listContent = res.data.list.data
        this.listContent.push(...res.data.list.data)
 
        this.page++
    //   // 加载状态结束
        this.loading = false;

    //     // 数据全部加载完成
        if (this.page >= this.total) {
          this.finished = true;
        }
    },
  }   

};
</script>

<style>

</style>